@mixin clear{
    width: 0;
    height: 0;
    display: block;
    content: "";
    overflow: hidden;
    clear: both;

}

@mixin afterClear{
    &:after{
        @include clear;
    }
}

@mixin flexbox($direction:x){
    display: -webkit-flex;
    display: flex;

    @if $direction == x{
        flex-direction: row;
        }@else{
            flex-direction: column;
        }
    }

    @mixin flexboxChild($x:1){
        -webkit-flex: $x;
        flex: $x;
    }

    @mixin removeFlexboxChild(){
        -webkit-flex: none;
        flex: none;
    }

    @mixin flexboxCenter{
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: flex;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
    }

    @mixin oneLine{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    @mixin removeOneLine{
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
    }


    @mixin moreLine($x:1){
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: $x;
        -webkit-box-orient: vertical;
    }

    @mixin cantSelect{
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    @mixin transition($name,$time:0.5s){
        -webkit-transition: $name $time;
        -moz-transition: $name $time;
        -ms-transition: $name $time;
        -o-transition: $name $time;
        transition: $name $time;
    }

    @mixin border-radius($degree){
        -webkit-border-radius: $degree;
        -moz-border-radius: $degree;
        -ms-border-radius: $degree;
        -o-border-radius: $degree;
        border-radius: $degree;
    }


    @mixin box-shadow($color,$horizontal,$vertical,$ambiguity){
        -webkit-box-shadow: $color $horizontal $vertical $ambiguity;
        -moz-box-shadow: $color $horizontal $vertical $ambiguity;
        -ms-box-shadow: $color $horizontal $vertical $ambiguity;
        -o-box-shadow: $color $horizontal $vertical $ambiguity;
        box-shadow: $color $horizontal $vertical $ambiguity;
    }

    //关闭按钮
    @mixin closeBut($fontsize:14px){
        text-align: center;
        cursor: pointer;

        &:after{
            font-family: 'KDA_iconfont';
            content: "\e6cc";
            font-size: $fontSize;
        }
    }

    @mixin setPlaceholderColor($color:#ccc){
        &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
            color: $color;
        }
        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: $color;
        }
        &::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: $color;
        }
        &:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: $color;
        }
    }

    //函数，传入个数，返回百分比
    @function getPercent($num) {
        @return 100 / $num * 1%;
    }


    @mixin iconfont($content){
        content: $content;
        font-family: "iconfont";
    }


    //字体默认样式
    $defineColor:#000;
    // 默认字体大小
    $fontSize: 32px;
    //边框的颜色，
    $borderColor:#ededed;
    //input输入框的高度，单行
    $inputHeight:35px;
    //主题色
    $themeColor:#FF4071;

    $borderPadding: 20px;
    // 默认背景灰色
    $backgroundGrey: #f5f5f5;











    // line---------------------------------------

    .mg-b-20{
        margin-bottom: 20px;
    }

    .mg-l-20{
        margin-left: 20px;
    }

    .mg-r-20{
        margin-right: 20px;
    }

    .mg-t-20{
        margin-top: 20px;
    }













    .themeColor{
        color: #18BC9C;
    }


    .bgRed{
        background-color: #FD6299;
    }

    .bgBlue{
        background-color: #38ABFB;
    }
    .bggray{
        background-color: #CCCCCC;
    }


    .t_c_yello{color:#FFB947;}
    .t_c_red{color:#FF463A;}
    .t_c_green{color:#00C94B;}
    .t_c_Orange{color:#FF701F;}
    .t_c_blue{color:#00AFFD;}
